<template>
  <div>
    <h1>App</h1>
    <h2>{{ $route.fullPath }}</h2>
    <ul>
      <!-- <li v-for=" ro in routes" :key="ro.name">
        <RouterLink :to="{ path: ro.path }">{{ ro.path }}</RouterLink>
      </li> -->
      <li v-for=" ro in routes" :key="ro.name">
        <RouterLink :to="{ name: ro.name }">{{ ro.meta.menuName }}</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();

const routes = computed(() => router.options.routes.filter(el => el.meta.hidden !== true));

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
